<template>
	<scroll-view class="recomend" scroll-y="true">
		<!-- 1.轮播图 -->
		<view class="swiper-container">
			<swiper class="swiper"
				:indicator-dots="indicatorDots"
				:autoplay="autoplay"
				:interval="interval"
				:duration="duration"
				:circular="circular">
				<swiper-item v-for="(item, index) in banner" :key="index">
					<image :src="item.pic_info.url"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 2.列表推荐 -->
		<view class="disc-list">
			<view class="discTitle">
				<text>推荐歌单</text>
			</view>
			<view class="discUl">
				<view class="discLi" v-for="(item, index) in playList" :key="index">
					<image :src="item.cover_url_small"></image>
					<view class="discLi-content">
						{{item.title}}
					</view>
				</view>
			</view>
			
		</view>
	</scroll-view>
</template>

<script>
	import {getRecommend, getDiscList} from "../../common/api/recommend.js"
	import {getSinger} from "../../common/api/singer.js"
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				circular: true,//采用衔接滚动
				banner: [],
				playList: []
			}
		},
		onLoad() {
			this._getRecommend()
			// this._getSinger()
		},
		methods: {
			_getRecommend() {
				getRecommend(res => {
					console.log(res)
					// this.banner = res.focus.data.content
					this._getBanner(res.focus.data)
					this._getPlayList(res.playlist.data)
				})
			},
			_getBanner(res) {
				this.banner = res.content
			},
			_getPlayList(res) {
				// console.log(res)
				
				this.playList = res.v_playlist
			},
			_getSinger() {
				const params = {
					area:-100,
					sex:-100,
					genre:-100,
					index:-100,
					sin:1*80,
					cur_page:2
				}
				getSinger(params, res => {
					console.log(res)
				})
			}
		}
	}
</script>

<style scoped>
	.recomend {
		background: #e8e8e8;
	}
	.swiper-container {
		padding: 20rpx 2%;
	}
	.swiper {
		height: 300rpx;
	}
	swiper-item image{
		width: 100%;
		height: 300rpx;
		border-radius: 15rpx;
	}
	.disc-list {
		padding: 0 2%;
	}
	.disc-list .discTitle {
		margin-bottom: 10rpx;
	}
	.disc-list .discUl {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-bottom: 20rpx;
	}
	.discUl .discLi {
		display: flex;
		flex-direction: column;
		width: 49%;
		margin-bottom: 20rpx;
	}
	.discLi image {
		width: 100%;
		height: 300rpx;
		border-radius: 15rpx;
	}
	.discLi .discLi-content {
		display: flex;
		align-items: center;
		width: 100%;
		font-size: 12px;
		/* 设置文字一行显示，超出部分显示为省略号↓ */
		white-space: wrap;
		overflow: hidden;
		text-overflow:ellipsis;
		/* 设置文字一行显示，超出部分显示为省略号↑ */
	}
</style>
